<nav class="navbar navbar-default navbar-fixed-top head_image" id:'top_nav'>
  <%= image_tag 'head2023.jpg', style:"height: 100%; width: 100%;" %>
</nav>

<script type="text/javascript">
  $('#top_div').mouseover(function(){
    $('#top_div').css('background-color','black');
    var logo_img = $('#logo_img3').attr('src');
    $('#logo_img').attr('src', logo_img);
  });

  $('#top_div').mouseout(function(){
    $('#top_div').css('background-color','white');
    var logo_img = $('#logo_img2').attr('src');
    $('#logo_img').attr('src', logo_img);
  });
</script>

<style type="text/css">
  /* .head_image {
    background-image: image-url('head.jpeg')
  } */
</style>